<template>
  <el-container class="main-container">
    <!--头部-->
    <el-header height="45px">
      <span class="header-item">经费管理系统</span>

      <el-link class="list-top-item" style="color: white" :underline="false" @click="toMainList">收支情况</el-link>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toHistoryList">收支历史</el-link>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toComparedList">收支对比</el-link>

      <div class="right-top">
        <el-link class="list-top-item3" style="color: white" :underline="false" @click="toUserList">用户管理</el-link>

        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-user-solid"></i><span class="el-dropdown-link2">{{ this.$store.state.user.loginName }} </span></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出/注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <el-container>
      <el-aside style="width: 14%" class="left-group"></el-aside>

      <!--主要内容-->
      <el-main>
        <div>
          <!--面包屑-->
          <el-breadcrumb separator="/" class="users-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>收支情况</el-breadcrumb-item>
          </el-breadcrumb>

          <!--主体表单卡片-->
          <el-card class="user-card-main">
            <!--上部分表单-->
            <el-form :inline="true" :model="financeVo" class="demo-form-inline">
              <el-form-item>
                <el-input class="list-input1" v-model="financeVo.userName" placeholder="请输入报销人"></el-input>
              </el-form-item>

              <el-form-item>
                <el-input class="list-input1" v-model="financeVo.reason" placeholder="请输入事由"></el-input>
              </el-form-item>

              <el-form-item>
                <el-date-picker style="width: 150px" v-model="financeVo.startTime" type="date" placeholder="开始时间"></el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-date-picker style="width: 150px" class="list-input2" v-model="financeVo.endTime" type="date" placeholder="结束时间"></el-date-picker>
              </el-form-item>


              <el-form-item>
                <el-button @click="resetFinanceVo" type="re" icon="el-icon-refresh">重置</el-button>
                <el-button @click="getFinanceList" type="primary"  icon="el-icon-search">查询</el-button>
                <el-button @click="openAdd" type="success" icon="el-icon-plus">添加数据</el-button>
              </el-form-item>
            </el-form>

            <!--表格-->
            <el-table :data="financeList" borde class="user-table-main">
              <el-table-column
                  prop="claimerUserId" width="90px" label="报销人" sortable>
                <template slot-scope="scope">
                  <span class="el-tag el-tag--light">{{scope.row.claimerUserId===2?'个人':'团队'}}</span>
                </template>
              </el-table-column>

              <el-table-column
                  prop="reason" width="100px" label="事由" sortable>
              </el-table-column>

              <el-table-column
                  prop="createTime" width="140px" label="收入/支出时间" :formatter="formatterTime" sortable>
              </el-table-column>

              <el-table-column
                  prop="sum" width="100px" label="收支金额"  sortable>
              </el-table-column>

              <el-table-column
                  prop="type" width="90px" label="类型"  sortable>
                <template slot-scope="scope">
                  <span class="el-tag el-tag--warning el-tag--light">{{scope.row.claimerUserId===1?'支出':'收入'}}</span>
                </template>
              </el-table-column>

              <el-table-column
                  prop="balance" width="100px" label="剩余金额"  sortable>
              </el-table-column>

              <el-table-column
                  prop="recorderUserId" width="90px" label="记录人"  sortable>
                <template slot-scope="scope">
                  <span class="el-tag el-tag--success el-tag--light">{{scope.row.recorderUserId===1?'管理员':'李津'}}</span>
                </template>
              </el-table-column>

              <el-table-column
                  prop="reasonTime" width="130px" label="报销时间" :formatter="formatterTime" sortable>
              </el-table-column>

              <el-table-column label="操作" width="150px">
                <template #default="scope">
                  <el-button type="primary" size="mini" @click="openUpdate(scope.row)">修改</el-button>
                  <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>

            <!--分页-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 8, 10]"
                :page-size="pageSize"
                background
                align="center"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!--      引入用户注册增加-->
            <FinanceAdd :addVisible="addVisible"
                     @changeShow="showAdd"
                     @reFresh="reFresh"></FinanceAdd>

            <!--      引入用户新增-->
            <FinanceUpdate :updateFinance="this.updateFinance"
                        :updateVisible="updateVisible"
                        @changeShow="showUpdate"
                        @reFresh="reFresh"></FinanceUpdate>


          </el-card>
        </div>
      </el-main>

      <el-aside style="width: 14%" class="right-group"></el-aside>
    </el-container>

  </el-container>
</template>

<script>
import {deleteFinanceInfoById, findFinanceList} from "@/api/main";
import {logout} from "@/api/login";
import FinanceAdd from "@/components/FinanceAdd";
import FinanceUpdate from "@/components/FinanceUpdate";

export default {
  name: "mainList",

  data () {
    return {
      radio:'1',
      // 控制新增编辑弹窗的显示与隐藏
      updateVisible: false,
      addVisible: false,

      financeVo:{
        userName:'',
        reason:'',
        startTime:'',
        endTime:''
      },

      updateFinance: '',

      financeList: [],


      //每页显示的条数
      pageSize: 8,
      //总条数
      total: 50,
      //当前页码
      current: 1
    }
  },

  components: {
    FinanceAdd,
    FinanceUpdate
  },

  created(){
    this.getFinanceList()
  },

  methods: {
    toUserList () {
      this.$router.push({ path: '/user' })
    },

    toMainList () {
      this.$router.push({ path: '/main' })
    },

    toHistoryList () {
      this.$router.push({ path: '/history' })
    },

    toComparedList () {
      this.$router.push({ path: '/compared' })
    },

    formatterTime(row,column){
      let data = row[column.property]
      return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(data )
    },

    // 监听子组件弹窗关闭后触发，有子组件调用
    showAdd(data){
      this.addVisible = data !== 'false';
    },

    showUpdate (data) {
      this.updateVisible = data !== 'false'
    },

    // 按钮点击事件 显示新增弹窗组件
    openAdd: function () {
      this.addVisible = true
    },

    // 按钮点击事件 显示编辑弹窗组件
    openUpdate: function (row) {
      //对象深克隆
      row = JSON.parse(JSON.stringify(row))
      this.updateFinance = row   //row当前行数据，把当前行的数据赋值给 表单
      this.updateVisible = true
    },

    //当每页条数改变的时候
    handleSizeChange(val) {
      //将val赋值给size
      this.size = val;
      //重新去后台查询数据
      this.getFinanceList();
    },
    //当前页码改变的时候
    handleCurrentChange(val) {
      this.current = val;
      this.getFinanceList();
    },

    //重置表单
    resetFinanceVo(){
      this.financeVo.userName = ''
      this.financeVo.reason = ''
      this.financeVo.startTime = ''
      this.financeVo.endTime = ''
      this.getFinanceList()
    },

    async getFinanceList(){
      const {data} = await findFinanceList(this.current,this.size,this.financeVo)
      this.financeList = data.data.records;
      this.total = data.data.total;
    },

    //删除操作按钮
    handleDelete: function (row) {
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteFinanceInfo(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * 删除用户
     */
    async deleteFinanceInfo (id) {
      await deleteFinanceInfoById(id).then(res => {
        if (res) {
          this.$notify.success({
            title: '操作成功',
            message: '用户删除',
          })
          //刷新数据
          this.reFresh()
        }
      })
    },

    //刷新页面
    reFresh () {
      this.getFinanceList()
    },

    //退出登陆
    async logout () {
      const res = await this.$confirm('此操作将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登入'
        })
      })
      if (res === 'confirm') {
        //删除token
        this.$store.commit('REMOVE_INFO')
        logout().then(resp => {
          if (resp) {
            // window.sessionStorage.clear()
            this.$router.push('/login')
          }
        })
      }
    },

  }
}


</script>

<style>

.main-container{
  height: 100%;
}

.el-header {
  background-color: #252047;
  color: #333;
  width: 100%;
}

.header-item{
  float: left;
  line-height: 45px;
  font-size: 22px;
  color: white;
  width: 14%;
  text-align: center;
}

.list-top-item3{
  font-size: 15px;
  color: white;
  width: 80px;
  text-align: center;
  line-height:45px;
}

.right-top{
  height: 42px;
  background-color: #252047;
  float: right;
  margin-right: 10%;
}


.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height:45px;
}

.el-dropdown-link2 {
  cursor: pointer;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height:45px;
  margin-left: 2px;
}

.left-group, .right-group{
  background-color: #c9d3e7;
}

.list-top-item{
  background-color: red;
  font-size: 15px;
  color: white;
  width: 8%;
  text-align:center;
  line-height:45px;
}

.list-top-item2{
  font-size: 15px;
  color: white;
  width: 8%;
  text-align: center;
  line-height:35px;
}

.users-breadcrumb{
  padding-left:20px;padding-bottom:10px;
  font-size:13px;
}

.user-card-main{
  width: 100%;
}

.list-input1{
  width: 160px;
  height: 38px;
}

.list-input2{
  width: 150px;
  height: 38px;
}

.user-table-main{
  margin-bottom: 50px;
}

input::placeholder {
  color: #757575;
  font-size: 15px;
}

</style>